<template>
  <div class="bannber_page">
    <vxe_table
      :options="options"
      @handleTableBtn="handleTableBtn"
      ref="baseTable"
    >
      <template #btn>
       
      </template>

      <template #coverUrl="{ row }">
        <el-image
          style="width: 60px"
          :src="row.coverUrl"
          :preview-src-list="[row.coverUrl]"
        >
        </el-image>
      </template>
    </vxe_table>
    <addDialog ref="add" @success="success"></addDialog>
    <detail ref="detail"></detail>
  </div>
</template>

<script>
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import addDialog from "./comps/addDialog.vue";
import { hasBtnAuth, parseTime } from "@/utils";
import { getCaseList,downUpCase, getCaseInfo } from "@/api/operation";
import { Message } from "element-ui";
import detail from "./comps/detail.vue";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
    addDialog,
    detail
  },
  data() {
    return {
      options: {
        id: "articletable",
        apiFn: getCaseList,
        cellConfig: {
          height: 100,
        },
        columns: [
          {
            field: "title",
            search:true,
            valueType:'input',
            title: "案例标题",
          },
          {
            field: "coverUrl",
            title: "案例封面",
            type:'html',
            slot: "coverUrl", 
          },
          {
            field: "orgCode",
            title: "商户ID",
          },
          {
            field: "state",
            title: "状态",
            type: "html",
            valueType: "select",
            options: [
              {
                label: "已提交待审核",
                value: 1,
              },
              {
                label: "已通过",
                value: 2
              },
              {
                label: "审核未通过",
                value: -1
              },
            ],
            formatter: ({ row }) => {
              if (row.state==1) {
                return "<span style='color:green'>已提交待审核</span>";
              } else if(row.state==2){
                return "<span style='color:green'>已通过</span>";
              }else if(row.state==-1){
                return "<span style='color:red'>审核未通过</span>";
              }
            },
          },
          {
            field: "updateTime",
            title: "时间",
            type: "html",
            formatter: ({ row }) => parseTime(row.updateTime),
          },
        ],
        btnWidth:300,
        btn: [
          {
            title: "通过",
            handleName: "handleUp",
            type: "success",
            show: (row) => row.state==1,

            // show: () => hasBtnAuth("btn_banner_edit"),
          },
          {
            title: "不通过",
            handleName: "handleDown",
            type: "danger",
            show: (row) => row.state==1,
            // show: (row) => row.state == 1 && hasBtnAuth("btn_banner_edit"),
          },
          {
            title: "详情",
            handleName: "handleDetail",
            type: "success",
          },
        ],
      },
    };
  },

  methods: {
   
    async handleUp(row) {
      const res = await downUpCase({
        id:row.id,
        state:2,
        reason:'通过'
      })
      if(!res.status){
        Message.success('操作成功')
        this.success()
      }
    },
    async handleDown(row) {
      const res = await downUpCase({
        id:row.id,
        state:-1,
        reason:'审核不通过'
      })
      if(!res.status){
        Message.success('操作成功')
        this.success()
      }
    },
    async handleDetail(row){
      const res = await getCaseInfo({id:row.id})
      if(!res.status){
        this.$refs.detail.open(res.content)
      }
    }
  },
};
</script>

<style lang="scss" scoped></style>
